import React, { memo , useReducer } from 'react'

//PureComponent会比较组件前后的props和state，如果发现和原状态一致（值或者指向的地址），就不再更新render
//memo会比较组件前后的props，如果没有变化，就不更新
//类组件既可以用PureComponent和memo
//函数组件只能用memo


//dispatch:派发(action)更新
//action:是一个对象，描述更新的内容，必须有一个type属性
//reducer:是一个纯函数，记录状态更新的规则

const initState = {
  num:0,
  val:"",
  list:[]
}

const reducer = (state,action) => {
  switch (action.type) {
    case "add+1":
      return {...state,num:state.num+action.step};
    case "dec-1":
      return {...state,num:state.num-1};
    case "addTodoItem":
      return {...state,list:[{id:0,done:false,title:100}]};
    default:
      return state;
  }
}

const Header = () => {
  const [state,dispatch] = useReducer(reducer,initState);

  const add = () => {
    dispatch({type:"add+1",step:10})//派发action时可以携带参数
  }

  const dec = () => {
    dispatch({type:"dec-1"})
  }

  console.log(111)
  return (
    <div>
      <h1>Todo List</h1>
      <h1>{state.num}</h1>
      <button onClick={add}>点击+1</button>
      <button onClick={dec}>点击-1</button>
    </div>


  )
}

export default memo(Header);